<template>
	<view>
		<view class="top-bar" >
			<view :class="'top-bar-item ' + (tabtopcur==0?'active':'')" @click="switchtabcur(0)">
					<view class="text">实时统计</view>
					<view  class="bottom-line"></view>
			</view>
			<view :class="'top-bar-item ' + (tabtopcur==1?'active':'')" @click="switchtabcur(1)">
					<view class="text">每月统计</view>
					<view  class="bottom-line"></view>
			</view>
		</view>
		<view class="shishi-box" v-if="tabtopcur==0"> 
			<view class="radio-time-box">
				<view class="timer-box">
					<picker mode="date" :value="date" @change="bindDateChange">
						<view class="timer-text">
							{{date}}
						</view>
					      <!-- <view class="uni-input"></view> -->
					</picker>
					
					<view class="arrow-img">
						<image src="/static/images/bottom.png"></image>
					</view>
				</view>
				<view class="radio-box-content">
					<view class="radio-box">
						<view class="text">签到人数/总人数</view>
						<view class="num "> <text class="have">{{departmentObj.checkinUserNum}}</text>/ <text class="haveno">{{departmentObj.totalUserNum}}</text> </view>
					</view>
					
				</view>
				<view class="fenlei-line" @click="skipToClassifyCalc()">
					<view class="public-line-height"></view>
					<view class="fenlei-line-box">
						<view class="left-text">分类统计</view>
							<view class="right-arrow">
								<image src="/static/images/zuoc.png"></image>
							</view>
					</view>
					
				</view>
				
				
				<view class="bumen-qiandao-box">
					<view class="title-box">
						<view class="bumensignin">部门签到</view>
							<view class="bumensignin-content">
								<view class="bumensignin-content-left">
									
									<view class="text-box">
	
										<view>{{departmentObj.departmentResume.name}}</view>
										<view class="bfb">
											<progress :percent="departmentObj.departmentResume.checkinUserNum/departmentObj.departmentResume.totalUserNum" stroke-width="5" border-radius="5"  />
										</view>
									</view>
									<view class="timer">{{currentdate}}</view>
									
									
								</view>
								<view class="bumensignin-content-right">
									<view class="sign-left">
										<view> <text>{{departmentObj.departmentResume.checkinUserNum}}/</text> <text>{{departmentObj.departmentResume.totalUserNum}}</text> </view>
										<view class="text-tip">签到</view>
									</view>
									<view class="avr-right">
										<view class="ave"> {{departmentObj.departmentResume.avgCheckinNum.toFixed(2)}}</view>
										<view class="text-tip">平均签到次数</view>
									</view>
								</view>
							</view>
					</view>
					
					
					<view class="public-line-height"></view>
					
					<view class="content-box">
						<view class="public-line-height"></view>
						<view class="stwich-box" >
							<view :class="'stwich-box-item ' + (hasign==0?'active':'')" @click="switchhasign(0)">
								已签到(15)
							</view>
							<view :class="'stwich-box-item ' + (hasign==1?'active':'')" @click="switchhasign(1)">
								未签到(6)
							</view>
						</view>
						
						<view class="content-box-content" >
							<view class="content-box-content-item" v-for="(item,index) in signinlist">
								<view class="left-img-box">
									<view class="img-box">
										<image :src="item.userInfo.avatarUrl?'item.userInfo.avatarUrl':'/static/images/header.png'"></image>
									</view>
									<view class="infor-box">
										<view class="name">{{item.userInfo.nickName}}</view>
										<!-- <view class="patrmeng">市场部</view> -->
									</view>
								</view>
								<view class="right-sign">
									签到  <text>{{item.num}}</text>次
								</view>
							</view>
							
							
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view class="every-day-box" v-if="tabtopcur==1" >
			<view class="top-timer">
				<view class="left-week-box" @tap="switchTab();">
					<view :class="'month item ' + (tabcur==0?'active':'')">月</view>
					<view :class="'week item ' + (tabcur==1?'active':'')">周</view>
				</view>
				<view class="right-timer-text">
					<view class="left-arrow-img arrow-img" @click="play('jian')">
						<image src="/static/images/arrow-left.png" ></image>
					</view>
					<view class="center-text">
						{{monthweekshow}}
					</view>
					<view class="right-arrow-img arrow-img" @click="play('jia')">
						<image src="/static/images/arrow-right.png"></image>
					</view>
				</view>
			</view>
			<view class="sign-detail">
		
				<view class="sign-content">
					<view class="sign-content-item first">
						<view class="sign-content-item-box">
							<view class="left-text">
								<image src="/static/images/header02.png"></image>
							</view>
							<view class="right-text">
								{{managerCheckMonthStatistics.checkUserNum}}人出勤
							</view>
						</view>
						<view class="public-line-height"></view>
					</view>
					<view class="sign-content-item">
						<view class="sign-content-item-box">
							<view class="left-text">
								平均签到次数
							</view>
							<view class="right-text">
								{{managerCheckMonthStatistics.avgCheckNum}}
							</view>
						</view>
						<view class="public-line-height"></view>
					</view>
					<view class="sign-content-item">
						<view class="sign-content-item-box">
							<view class="left-text">
								未签到人数
							</view>
							<view class="right-text">
								{{managerCheckMonthStatistics.unCheckUserNum}}
							</view>
						</view>
						<view class="public-line-height"></view>
					</view>
					<view class="sign-content-item">
						<view class="sign-content-item-box">
							<view class="left-text">
								开户数
							</view>
							<view class="right-text">
								{{managerCheckMonthStatistics.openUserNum}}
							</view>
						</view>
						<view class="public-line-height"></view>
					</view>
					<view class="sign-content-item">
						<view class="sign-content-item-box">
							<view class="left-text">
								未开户数
							</view>
							<view class="right-text">
								{{managerCheckMonthStatistics.unOpenUserNum}}
							</view>
						</view>
						<view class="public-line-height"></view>
					</view>
				</view>
			</view>
			
		</view>
	
	</view>
</template>

<script>


	const util = require("../../utils/util.js");
	//获取应用实例
	const api = require("../../config/api.js");
	export default {
		data() {
			
			return {
				deptId:'',
				date: '',
				tabtopcur: 0,
				hasign:0,
				// num:0,
				tabcur: 0,
				num:0,
				startStopTime:'',
				weektypeArray:[],
				monthweekshow:'',
				currentdate:'',
				signinlist :'',
				
				
				
				// 查询签到信息
				
				userInfo:{
					avatarUrl:"",
					nickName:'',
					deptName:''
					
				},
							
				checkInNum:0,
				checkInDays:0,
				unCheckInDays:0,
				openNums:0,
				unOpenNums:0,
				
				
				
				// 部门信息
				departmentObj:'',
				// 每月统计的信息
				managerCheckMonthStatistics:""
				
				
				
			}
			
		},
		components: {
			
		},
		filters: {
			
		},
		onLoad(option) {
			var _that = this;
			var  num  = this.num;
			if(option&&option.deptId){
				this.deptId = option.deptId
			}
			
			
			this.getDate({
			           format: true
			       })
					
			uni.setStorageSync('isGetShopInforStorage', false);
			
		},
		methods: {
			managerClassifyStatistics(){
				this.signinlist='';
				var that = this;
				var data = new Object();
				
				data.classify = 1;
				data.hasNum = 1;
				if(this.hasign==0){
					data.hasNum = 1;
				}else{
					data.hasNum = 0;
				}
				data.day = this.date;
				
				data.deptId =11;
				util.request(api.managerClassifyStatistics , data, "POST").then(res => {
						 console.log("分类返回",res);
						if(res.error==0){
							
							this.signinlist = res.data;
						}
				})
				
				
			},
			 bindDateChange: function(e) {
			            this.date = e.target.value;
						this.managerCheckDayStatistics();
						// 签到人员列表
						this.managerClassifyStatistics();
			        },
			 getDate(type) {
					const date = new Date();
					let year = date.getFullYear();
					let month = date.getMonth() + 1;
					let day = date.getDate();
		
					if (type === 'start') {
						year = year - 60;
					} else if (type === 'end') {
						year = year + 2;
					}
					month = month > 9 ? month : '0' + month;;
					day = day > 9 ? day : '0' + day;
					
					  this.date = `${year}-${month}-${day}`;
					  this.getDate = this.date;
					  this.currentdate = this.date;
					  // 获取时间以后执行日经理日统计接口
					  this.managerCheckDayStatistics();
					  // 签到人员列表
					  this.managerClassifyStatistics();
					
					
			 },
			 managerCheckDayStatistics(){
				  // console.log("总经理日统计返回",res);
				 var _that = this;
				 var data =  new Object();
				 data.day = this.date;
				 data.deptId =  this.deptId;
				 util.request(api.managerCheckDayStatistics , data, "POST").then(res => {
					 console.log("总经理日统计返回",res);
					if(res.error==0){
						this.departmentObj=res.data;
					}
				 })
				 
			 },
			switchtabcur(type){
				var _that = this;
				var num = this.num;
				console.log('this.tabtopcur',this.tabtopcur)
				this.tabtopcur = type;
				if(this.tabtopcur==0){
					// 当前统计周的签到
					_that.getMonthStartAndEnd(num)
				}else{
					// 当前统计月的签到
					_that.getWeekStartAndEnd(num)
				}
			},
			switchhasign(type){
				this.hasign=type;
				
				this.managerClassifyStatistics();
				
			},
			
			
			switchTab() {
				var _that = this;
				// 切换月周时把num置为0
				this.num = 0;
				if (this.tabcur == 0) {
					this.tabcur = 1
				} else {
					this.tabcur = 0
				}
				if(this.tabcur==1){
					
					// 当前统计月的签到
					_that.getWeekStartAndEnd(this.num)
				}else{
					// 当前统计周的签到
					_that.getMonthStartAndEnd(this.num)
				}
			},
			
			play(type) {
				var _that = this;
				if (type == 'jian') {
					this.num--;
				} else {
					this.num++
				}
				console.log('num', this.num);
				if(this.num>=1){
					uni.showToast({
						title:'不能选择未来日期！',
						icon:'none'
					})
					return 
				}
				if(this.tabcur==1){
					// 当前统计月的签到
					_that.getWeekStartAndEnd(this.num)
				}else{
					// 当前统计周的签到
					_that.getMonthStartAndEnd(this.num)
				}
			},
			
			// getWeekStartAndEnd(0)
			 getWeekStartAndEnd(AddWeekCount) {
				console.log("执行周");
				//起止日期数组  
				var startStop = new Array();
				//一天的毫秒数  
				var millisecond = 1000 * 60 * 60 * 24;
				//获取当前时间  
				var currentDate = new Date();
				//相对于当前日期AddWeekCount个周的日期
				currentDate = new Date(currentDate.getTime() + (millisecond * 7 * AddWeekCount));
				//返回date是一周中的某一天
				var week = currentDate.getDay();
				//返回date是一个月中的某一天  
				var month = currentDate.getDate();
				//减去的天数  
				var minusDay = week != 0 ? week - 1 : 6;
				//获得当前周的第一天  
				var currentWeekFirstDay = new Date(currentDate.getTime() - (millisecond * minusDay));
				//获得当前周的最后一天
				var currentWeekLastDay = new Date(currentWeekFirstDay.getTime() + (millisecond * 6));
				//添加至数组  
				var  getDateStr3 = this.getDateStr3;
				startStop.push(getDateStr3(currentWeekFirstDay, 'start'));
				startStop.push(getDateStr3(currentWeekLastDay, 'end'));
				console.log('startStop周', startStop);
				this.startStopTime = startStop;
				
				// 请求接口 
				this.checkStatistics(startStop)
				return startStop;
			},
			/** 
			 * 获得相对当月AddMonthCount个月的起止日期 
			 * AddMonthCount为0 代表当月 为-1代表上一个月 为1代表下一个月 以此类推
			 * ***/
			getMonthStartAndEnd(AddMonthCount) {
				 console.log("执行月");
				//起止日期数组  
				var startStop = new Array();
				//获取当前时间  
				var currentDate = new Date();
				var month = currentDate.getMonth() + AddMonthCount;
				if (month < 0) {
					var n = parseInt((-month) / 12);
					month += n * 12;
					currentDate.setFullYear(currentDate.getFullYear() - n);
				}
				currentDate = new Date(currentDate.setMonth(month));
				//获得当前月份0-11  
				var currentMonth = currentDate.getMonth();
				//获得当前年份4位年  
				var currentYear = currentDate.getFullYear();
				//获得上一个月的第一天  
				var currentMonthFirstDay = new Date(currentYear, currentMonth, 1);
				//获得上一月的最后一天  
				var currentMonthLastDay = new Date(currentYear, currentMonth + 1, 0);
				//添加至数组  
				var  getDateStr3 = this.getDateStr3;
				startStop.push(getDateStr3(currentMonthFirstDay, 'start'));
				startStop.push(getDateStr3(currentMonthLastDay, 'end'));
				console.log('startStop 月', startStop);
				this.startStopTime = startStop;
				// 请求接口
				this.checkStatistics(startStop)
				//返回  
				return startStop;
			},
			
			
			//获取当前日期yy-mm-dd
			//date 为时间对象
			getDateStr3(date, endstart) {
				var year = "";
				var month = "";
				var day = "";
				var now = date;
				year = "" + now.getFullYear();
				if ((now.getMonth() + 1) < 10) {
					month = "0" + (now.getMonth() + 1);
				} else {
					month = "" + (now.getMonth() + 1);
				}
				if ((now.getDate()) < 10) {
					day = "0" + (now.getDate());
				} else {
					day = "" + (now.getDate());
				}
				// s页面上显示的时间筛选
				
				
				
				// var weekarray =[];
				if(this.tabcur==1){
					console.log("执行");
					if(endstart == 'start'){
						
						this.weektypeArray[0]=month + "-" + day;
					}
					if(endstart == 'end'){
						
						this.weektypeArray[1]=month + "-" + day;
					}
					this.monthweekshow = this.weektypeArray[0] + " "  + this.weektypeArray[1];
				}else{
					this.monthweekshow =year + "-" + month;
				}
				// 
				console.log('this.weekarray',this.weektypeArray);
			
				if (endstart == 'start') {
					return year + "-" + month + "-" + day + ' 00:00:00';
				} else {
					return year + "-" + month + "-" + day + ' 23:59:59';
				}
			
			},
			
			
			checkStatistics(timearray){
				var  _that = this;
				let daySart=timearray[0];
				let dayEnd=timearray[1];
				
				console.log(daySart);
				console.log(dayEnd);
				var data =  new Object();
				data.from= daySart;
				data.to = dayEnd;
				util.request(api.managerCheckMonthStatistics , data, "POST").then(res => {
					console.log("签到查询返回",res);
					if(res.error==0){
						var data = res.data;
						this.managerCheckMonthStatistics = data;
						
						
					}else{
						
					}
					
				})
				
			},
			skipToClassifyCalc(){
				uni.navigateTo({
						url:'/pages/classifyCalc/classifyCalc?deptId=' + this.deptId
					})
			}
		}
	}
</script>

<style>
	@import url("./calc.css");
</style>
